let kouul=document.querySelector('.kou ul')
let select=document.querySelector('.choose select')
let before=document.querySelector('.choose .before')
let after=document.querySelector('.choose .after')
let shu=0
let xhr =new XMLHttpRequest()
xhr.open('get','http://chst.vip:1234/api/getmoneyctrl?pageid='+shu,true)
xhr.onload=function(){
    if(xhr.status===200){
        let res =JSON.parse(xhr.responseText)
        let an=res .result
        let lis=''
        console.log(an);
        an.forEach(item => {
            lis+=`
            <li productid=${item.productId}>
                <img src="${item.productImgSm.match(/imgurl=(\S*)/)[1]}">
                <div class="inx">
                    <p class="p1">${item.productName}</p>
                    <p class="p2">${item.productPinkage}</p>
                    <span class="span1">${item.productFrom}|${item.productTime}</span>
                    <i class="iconfont icon-xinxi"></i> 
                    <span class="span2">${item.productComCount}</span> 
                </div>
            </li> 
            `  
        });
        kouul.innerHTML=lis

        // 获取页数
        let pag=Math.floor(res.totalCount/10)
        las=''
        // 遍历页数，拼接起来给select添加进去
        for(var i=1;i<=pag;i++){
            las+=`
                <option value="${i}">${i}/${pag}</option>
            `
        }
        select.innerHTML=las
        // 把总页数给select添加上去
        select.pag=pag

    }
}
xhr.send(null)



// 给点击下一页绑定事件
after.onclick=function(){
shu++
if(shu>select.pag-1){
    shu=select.pag-1
}
let xhr =new XMLHttpRequest()
xhr.open('get','http://chst.vip:1234/api/getmoneyctrl?pageid='+shu,true)
xhr.onload=function(){
    if(xhr.status===200){
        let res =JSON.parse(xhr.responseText)
        let an=res .result
        let lis=''
        an.forEach(item => {
            lis+=`
            <li productid=${item.productId}>
                <img src="${item.productImgSm.match(/imgurl=(\S*)/)[1]}">
                <div class="inx">
                    <p class="p1">${item.productName}</p>
                    <p class="p2">${item.productPinkage}</p>
                    <span class="span1">${item.productFrom}|${item.productTime}</span>
                    <i class="iconfont icon-xinxi"></i> 
                    <span class="span2">${item.productComCount}</span> 
                </div>
            </li> 
            `  
        });
        kouul.innerHTML=lis
        let option=document.querySelectorAll('option')
        option[shu].selected=true

    }
}
xhr.send(null)
}


// 给点击上一页绑定事件
before.onclick=function(){
shu--
if(shu<0){
    shu=0
}
let xhr =new XMLHttpRequest()
xhr.open('get','http://chst.vip:1234/api/getmoneyctrl?pageid='+shu,true)
xhr.onload=function(){
    if(xhr.status===200){
        let res =JSON.parse(xhr.responseText)
        let an=res .result
        let lis=''
        console.log(res);
        an.forEach(item => {
            lis+=`
            <li productid=${item.productId}>
                <img src="${item.productImgSm.match(/imgurl=(\S*)/)[1]}">
                <div class="inx">
                    <p class="p1">${item.productName}</p>
                    <p class="p2">${item.productPinkage}</p>
                    <span class="span1">${item.productFrom}|${item.productTime}</span>
                    <i class="iconfont icon-xinxi"></i> 
                    <span class="span2">${item.productComCount}</span> 
                </div>
            </li> 
            `  
        });
        kouul.innerHTML=lis
        let option=document.querySelectorAll('option')
        option[shu].selected=true

    }
}
xhr.send(null)
}


select.onclick=function(e){
    var e=e || window.event
    var target=e.target || e.srcElement
    shu=target.value-1

let xhr =new XMLHttpRequest()
xhr.open('get','http://chst.vip:1234/api/getmoneyctrl?pageid='+shu,true)
xhr.onload=function(){
    if(xhr.status===200){
        let res =JSON.parse(xhr.responseText)
        let an=res .result
        let lis=''
        console.log(res);
        an.forEach(item => {
            lis+=`
            <li productid=${item.productId}>
                <img src="${item.productImgSm.match(/imgurl=(\S*)/)[1]}">
                <div class="inx">
                    <p class="p1">${item.productName}</p>
                    <p class="p2">${item.productPinkage}</p>
                    <span class="span1">${item.productFrom}|${item.productTime}</span>
                    <i class="iconfont icon-xinxi"></i> 
                    <span class="span2">${item.productComCount}</span> 
                </div>
            </li> 
            `  
        });
        kouul.innerHTML=lis
        let option=document.querySelectorAll('option')
        option[shu].selected=true

    }
}
xhr.send(null)
}

// 用事件委托给每个li绑定点击事件
kouul.onclick=function(e){
    var e=e || window.event
    var target=e.target || e.srcElement
    if(target.nodeName==='DIV' ||  target.nodeName==='IMG'){
        localStorage.setItem('productid',target.parentNode.getAttribute('productId'))
        location.href = 'http://127.0.0.1:5500/js/day18/html/details.html';
    } else if(target.nodeName==='P' || target.nodeName==='SPAN'){
        localStorage.setItem('productid',target.parentNode.parentNode.getAttribute('productId'))
        location.href = 'http://127.0.0.1:5500/js/day18/html/details.html';

    }
}